<template>
  <div v-if="showPopup" class="popup-box">
    <div class="popup-content">
      <div class="flex items-center justify-between p-x-30 p-y-16 title">
        <div class="font-size-22 color-1 font-weight-700">冲账退货</div>
        <div
          @click="showPopup = false"
          class="iconfont icon-guanbi font-size-22"
        ></div>
      </div>

      <div class="content">
        <div class="left text-center ">
          <WSearchInput
            v-model="inputValue"
            saomaType="chongzhangTuihuo"
            placeholder="请扫描或输入条码"
            class="m-b-24"
          >
            <template #input-icon>
              <div class="iconfont icon-a-saoma_scan-code3"></div>
            </template>
          </WSearchInput>

          <w-image class="m-x-auto" :src="saomaIcon" mode="widthFix" width="160rpx" />

          <div class="m-t-10 color-1 font-size-18 font-weight-700">扫描凭证条码</div>
          <div class="m-t-6">请扫描顾客「付款凭证」中的条码</div>
        </div>
        <div class="right">
          <div>
            <NumKeyboard
              ratio="106/66"
              class="gap-8"
              @confirm="numKeyboardConfirm"
              v-model="inputValue"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { useCommonStore } from "../../store/common";
const commonStore = useCommonStore();
import saomaIcon from "@/static/images/document-log/saoma-icon.png";

const showPopup = ref(false);
const inputValue = ref("");
const ovlSaomaType = ref("");
const emit = defineEmits(['confirm']);

watch(showPopup, (newVal) => {
  if (newVal) {
    ovlSaomaType.value = commonStore.saomaType;
    commonStore.setSaomaType("chongzhangTuihuo");
  } else {
    commonStore.setSaomaType(ovlSaomaType.value);
  }
});
function open() {
  showPopup.value = true;
}
function close() {
  showPopup.value = false;
}
function numKeyboardConfirm() {
  emit('confirm',inputValue.value)
}

// 扫码枪逻辑
uni.$on("sendCode", sendCode);
function sendCode(e) {
  // 不是当前输入框的扫码
  if (commonStore.saomaType !== "chongzhangTuihuo") return;
  inputValue.value = e;
  // 搜索商品，添加购物车，如果没有提示商品不存在
  // setTimeout(() => {
  //   inputValue.value = "";
  // }, 5000);
}
defineExpose({
  open,
  close
});
</script>
<style lang="scss" scoped>
.popup-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba($color: #000000, $alpha: 0.3);
  // backdrop-filter: blur(20px);
  .popup-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 754rpx;
    min-height: 450rpx;
    border-radius: 20rpx;
    background: #fff;
    // padding: 30rpx 40rpx;

    .title {
      border-bottom: 1px solid $uni-border-color-1;
    }

    .content {
      padding: 40rpx 35rpx 0 30rpx;
      display: flex;
      gap: 30rpx;
      .left {
        width: 325rpx;
      }
      .right {
        flex: 1;
      }
    }
  }
}
</style>
